<div class="section gf-form-group">
  <h5 class="section-heading">
    Metrics Tooltips
    <info-popover mode="right-normal">
      <span
        ng-bind-html="$GF.popover('Add/change tooltip/popup with aggregated values in shapes defined in color mapping', 'TOOLTIPS')">
      </span>
    </info-popover>
  </h5>
  <gf-form-switch class="gf-form" label-class="width-10" tooltip="Add tooltips metrics and graphs on shapes"
    label="Display metrics" checked="rule.tooltip">
  </gf-form-switch>
  <div class="gf-form" ng-if="rule.tooltip">
    <label class="gf-form-label width-10">Label
      <info-popover mode="right-normal"><span ng-bind-html="$GF.popover('Label of metric in popup', 'TOOLTIPS')"></span>
      </info-popover>
    </label>
    <input type="text" class="gf-form-input width-12" ng-model="rule.tooltipLabel" ng-model-onblur placeholder="auto" />
  </div>
  <div class="gf-form" ng-if="rule.tooltip">
    <label class="gf-form-label width-10">When state is
      <info-popover mode="right-normal">
        <span ng-bind-html="$GF.popover('Define condition to add values in tooltip', 'TOOLTIPS')"> </span>
      </info-popover>
    </label>
    <div class="gf-form-select-wrapper width-12">
      <select class="gf-form-input" ng-model="rule.tooltipOn"
        ng-options="c.value as c.text for c in editor.tooltipOn"></select>
    </div>
  </div>
  <div class="gf-form" ng-if="rule.tooltip">
    <label class="gf-form-label width-10">Direction
      <info-popover mode="right-normal">
        <span ng-bind-html="$GF.popover('Define the sens of display', 'TOOLTIPS', 'tooltip_direction_ani')">
        </span>
      </info-popover>
    </label>
    <div class="gf-form-select-wrapper width-12">
      <select class="gf-form-input" ng-model="rule.tpDirection"
        ng-options="c.value as c.text for c in editor.tpDirection"></select>
    </div>
  </div>
  <gf-form-switch label="Color with state" class="gf-form" label-class="width-10"
    tooltip="Color values in tooltip with state/thresholds colors" checked="rule.tooltipColors"
    ng-if="rule.tooltip">
  </gf-form-switch>
</div>
<div class="section gf-form-group">
  <h5 class="section-heading">
    Metadata Tooltips
    <info-popover mode="right-normal">
      <span ng-bind-html="$GF.popover('Add metadata into the tooltip', 'TOOLTIPS')"> </span>
    </info-popover>
  </h5>
  <gf-form-switch class="gf-form" label-class="width-10" tooltip="Add metadatas into the tooltip" label="Display metadatas"
    checked="rule.tpMetadata">
  </gf-form-switch>
</div>
